<template>
  <div>
    <div ref="echartsPanel" class="echarts-model" ></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
const echartsPanel = ref(null);
let myChart = null;
let option = null;

// let chartDom = document.getElementById('echarts_panel');
// let myChart = echarts.init(chartDom);

onMounted(() => {
  if (echartsPanel.value) {
    myChart = echarts.init(echartsPanel.value);

    setTimeout(() => {
      option = {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2019", "2020", "2021", "2022", "2023", "2024"],
            ["奶茶", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["抹茶", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["奶酪可可", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["布朗尼", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2023} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2023",
              tooltip: "2023",
            },
          },
        ],
      };
      myChart.setOption(option);
    }, 0);

    myChart.on("updateAxisPointer", function (event) {
      const xAxisInfo = event.axesInfo[0];
      if (xAxisInfo) {
        const dimension = xAxisInfo.value + 1;
        myChart.setOption({
          series: {
            id: "pie",
            label: {
              formatter: "{b}: {@[" + dimension + "]} ({d}%)",
            },
            encode: {
              value: dimension,
              tooltip: dimension,
            },
          },
        });
      }
    });
  }
});
</script>
<style scoped>
.echarts-model{
    min-width: 800px;
    max-width: 100%;
    height: 680px;    
}
</style>